{% extends 'base.html' %}

{% block title %}
    详情页
{% endblock %}

{% block head %}
    <link rel="stylesheet"
          href="{{ url_for('static', filename='plugins/font-awesome-4.7.0/css/font-awesome.min.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='plugins/bootstrap-star-rating-master/css/star-rating.min.css') }}">

    <style>
        /* 添加样式以美化页面 */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            font-size: 16px;
        }

        h1 {
            color: #333;
            font-weight: bold;
        }

        img {
            max-width: 100%;
            height: auto;
            margin-top: 10px;
        }

        p {
            margin-top: 10px;
            color: #555;
        }

        /*  灰色线段  */
        .gray-line {
            border-top: 1px solid #eeeeee;
        }

        /*  标签样式  */
        .custom-label {
            border: 3px dashed #eeeeee;
            background-color: #fff;
            color: #000;
            padding: 5px;
            margin-right: 30px;
            border-radius: 10px;
            font-size: 19px;
            margin-top: 5px;
        }

        .text-container {
            width: 150px; /* 设置容器宽度 */
            height: 60px; /* 设置容器高度 */
            overflow: hidden; /* 隐藏超出容器范围的内容 */
        }

        .text {
            display: -webkit-box; /* 将文本内容以块级元素的方式显示 */
            -webkit-line-clamp: 2; /* 设置显示的行数为两行 */
            -webkit-box-orient: vertical; /* 设置文本垂直方向排列 */
            overflow: hidden; /* 隐藏超出指定行数的文本内容 */
            text-overflow: ellipsis; /* 添加省略号 */
        }

    </style>
{% endblock %}

{% block body %}
    <section>
        <div class="row">
            <div class="col-md-4">
                <img src="{{ product.product_image }}" alt="{{ product.product_name }}">
            </div>
            <div class="col-md-8">
                <h1>{{ product.product_name }}</h1>
                <div class="gray-line"></div>
                <p style="color: red;">平均评分</p>
                <input id="average_rating" type="text" title=""/>
                <span id="average_span"></span>
                <p style="color: red;">商品类别</p>
                <p style="font-weight: bold;font-size: 18px;">{{ product.product_category }}</p>

            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <h3 style="font-weight: bold;">
                    <i data-text="fa-flag" class=" fa fa-flag js-copy"></i>
                    商品评价标签
                </h3>
                <div id="tag"></div>
            </div>
        </div>
    </section>

    <section style="margin-top: 15px;">
        <h3 style="font-weight: bold;">
            <i data-text="fa-heart" class=" fa fa-heart js-copy"></i>
            为您推荐
        </h3>
        <div id="tag"></div>
        <div id="userRecs">
        </div>
    </section>

    <section style="margin-top: 15px;">
        <h3 style="font-weight: bold;">
            <i data-text="fa-star" class=" fa fa-star js-copy"></i>
            相似推荐
        </h3>
        <div id="tag"></div>
        <div id="contentRecs">
        </div>
    </section>

    <section style="margin-top: 15px;">
        <h3 style="font-weight: bold;">
            <i data-text="fa-user" class=" fa fa-user js-copy"></i>
            我的评分
        </h3>

        <input id="my_rating" type="text" title=""/>
    </section>

{% endblock %}

{% block js %}
    <script src="{{ url_for('static', filename="plugins/bootstrap-star-rating-master/js/star-rating.js") }}"></script>

    <script>
        $(document).ready(
            function () {
                //分隔标签
                splitTags();

                // 创建平均评分的star
                var $inp = $('#average_rating');
                $inp.rating({
                    min: 0,
                    max: 5,
                    step: 0.1,
                    size: 'xs',
                    showClear: false,
                    displayOnly: true,
                });
                //对平均评分的星星设置数量
                setAverageStar();

                //获取为您推荐和相似推荐的数据
                sendAjax('{{ url_for("offline.userRecs") }}', "#userRecs")
                sendAjax('{{ url_for("offline.contentRecs") }}', "#contentRecs")

                //我的评分
                $("#my_rating").rating({
                    min: 0,
                    max: 5,
                    step: 0.1,
                    size: 'sm',
                    showClear: false,
                });
                $("#my_rating").on('change', function () {
                    // 把当前数据报错到mysql
                    ratingMysql();
                    // 把当前数据也发送到redis
                    ratingRedis();
                    // 写入日志文件
                    ratingLog();
                });
            });

        function splitTags() {
            /*  标签分割展示  */
            // 标签字符串
            var tags = "{{ product.product_ugc_tag }}";
            // 使用 split() 方法将标签字符串分割成数组
            var tagArray = tags.split("|");
            // 遍历数组并逐个显示出来
            for (var i = 0; i < tagArray.length; i++) {
                var tag = tagArray[i];
                // 创建一个新的 <span> 元素用于显示标签
                var span = document.createElement("span");
                span.className = "custom-label";
                span.textContent = tag;
                // 将 <span> 元素添加到指定的容器中
                document.getElementById("tag").appendChild(span);
            }
        }

        function setAverageStar() {
            // 发送 AJAX 请求获取评分数据
            $.ajax({
                url: '/average_rating',
                method: "post",
                contentType: 'application/json',
                data: JSON.stringify({'product_id': "{{ product.product_id }}"}),
                success: function (data) {
                    // console.log(data.average_rating)
                    $("#average_rating").rating("update", data.average_rating)
                    $("#average_span").text(data.average_rating + "分")
                },
                error: function (error) {
                    console.error(error);
                }
            });
        }

        function sendAjax(url, locateDiv) {
            // 发送 AJAX 请求
            $.ajax({
                url: url,
                method: "POST",
                contentType: 'application/json',
                data: JSON.stringify({'product_id': '{{ product.product_id }}'}),
                success: function (response) {
                    // 在控制台打印响应结果
                    // console.log(response);
                    // 填充之前清空
                    $(locateDiv).empty();
                    $.each(response.productsList, function (index, obj) {
                        var detailPageLink = '/detail/' + obj.product_id;  // 替换为实际的详情页路径
                        var s_col =
                            '<div class="col-md-2">' +
                            '<a href="' + detailPageLink + '">' +
                            '<img style="width: 120px;height: 120px" src="' + obj.product_image + '"></a>' +
                            '<div class="text-container"><p class="text">' + obj.product_name + '</div></p>' +
                            '</div>';
                        if (index < 6) {
                            $(locateDiv).append(s_col);
                        }
                    })
                }
            });
        }

        function ratingMysql() {
            // 打印当前星星的数值
            //console.log('当前星星数值:', $("#my_rating").val());
            $.ajax({
                url: '{{ url_for("business.setRating") }}',
                method: "post",
                contentType: 'application/json',
                data: JSON.stringify({
                    'product_id': "{{ product.product_id }}",
                    "rating": $("#my_rating").val()
                }),
                success: function (data) {
                    if (data.status === "fail") {
                        console.log(data.message)
                    }
                }
            });
        }

        function ratingRedis(){
            $.ajax({
                url: '{{ url_for("online.redis_message_product") }}',
                method: "post",
                contentType: 'application/json',
                data: JSON.stringify({
                    'product_id': "{{ product.product_id }}",
                    "rating": $("#my_rating").val()
                }),
                success: function (data) {
                    if (data.status === "fail") {
                        console.log(data.message)
                    }
                }
            });
        }

        function ratingLog(){
            $.ajax({
                url: '{{ url_for("online.rating_log") }}',
                method: "post",
                contentType: 'application/json',
                data: JSON.stringify({
                    'product_id': "{{ product.product_id }}",
                    "rating": $("#my_rating").val()
                }),
                success: function (data) {
                    if (data.status === "fail") {
                        console.log(data.message)
                    }
                }
            });
        }
    </script>
{% endblock %}